<template>
    <div class="template">
        <img :src="homebg" style="position: absolute;top: 0;left: 0;width: 100vw;max-height: 50vh;" />
        <div class="home">
            <div style="color: #90CB79;">Custom</div>
            <div>QR</div>
            <div>code</div>
            <div class="block" @click="router.push('/store')">
                <img :src="store" style="width: 40px;"/>
                Store
            </div>
            <div class="block" style="top: 160px;" @click="router.push('/history')">
                <img :src="history" style="width: 40px;"/>
                History
            </div>
            <div class="HK" >
                <div class="HKTip">Let’s start</div>
                <img :src="huakuairight" class="huakuairight" />
                <van-slider v-model="SliderValue" active-color="transparent" inactive-color="transparent" @change="onChange" @click="router.push('/make')">
                  <template #button>
                    <img :src="huakuai" style="height: 51px;display: block;"/>
                  </template>
                </van-slider>
            </div>

        </div>
    </div>
</template>
<script setup>
import homebg from '../assets/homebg.png'
import huakuairight from '../assets/huakuairight.png'
import huakuai from '../assets/huakuai.png'
import store from '../assets/store.png'
import history from '../assets/history.png'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const SliderValue = ref(0)
const onChange = (val) => {
    // if (val == 100) {
        router.push('/make')
    // }else {
    //     SliderValue.value = 0
    // }
}
onMounted(() => {
    if(!localStorage.getItem('MakeQRFirst')) {
        localStorage.setItem('MakeQRCoinsNum', 20)
        localStorage.setItem('MakeQRFirst', 1)
	}
})
</script>
<style scoped>
.home {
    position: fixed;
    bottom: 10vh;
    font-weight: 400;
    font-size: 62px;
    width: 100vw;
    padding: 0 20px;
    box-sizing: border-box;
}
.HK {
    width: 100%;
    height: 67px;
    background: #80C978;
    border-radius: 63px 63px 63px 63px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 30px;
    box-sizing: border-box;
    margin-top: 20px;
}
.HKTip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 400;
    font-size: 18px;
    color: #FFFFFF;
}
.huakuairight {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    height: 30%;
}
.block {
    width: 40px;
    position: absolute;
    top: 80px;
    right: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    font-size: 18px;
    color: #000000;
}
</style>